<template>
  <div id="resizer_bar" class="slide_tool_bar">

    <div class="tool_bar_item">
      <div class="bar_item" :class="{bar_item_disabled:false}" @click="operationChange(0)">
        <img class="bar_item_img" title="将图片填充至编辑区" src="~@/assets/img/SlideEditor/SlideEditor_ToolBar/fill.png">
        <span class="bar_item_text">裁剪</span>
      </div>
    </div>

    <div class="tool_bar_item">
      <div class="bar_item" :class="{bar_item_disabled:false}" @click="operationChange(1)">
        <img class="bar_item_img" title="将图片填充至编辑区" src="~@/assets/img/SlideEditor/SlideEditor_ToolBar/fill.png">
        <span class="bar_item_text">涂鸦</span>
      </div>
    </div>

    <div class="tool_bar_item">
      <div class="bar_item" :class="{bar_item_disabled:false}" @click="operationChange(2)">
        <img class="bar_item_img" title="将图片填充至编辑区" src="~@/assets/img/SlideEditor/SlideEditor_ToolBar/fill.png">
        <span class="bar_item_text">直线</span>
      </div>
    </div>

    <div class="tool_bar_item">
      <div class="bar_item" :class="{bar_item_disabled:false}" @click="operationChange(3)">
        <img class="bar_item_img" title="将图片填充至编辑区" src="~@/assets/img/SlideEditor/SlideEditor_ToolBar/fill.png">
        <span class="bar_item_text">矩形</span>
      </div>
    </div>

    <!--<div class="tool_bar_item">-->
      <!--<div class="bar_item" :class="{bar_item_disabled:false}" @click="operationChange(4)">-->
        <!--<img class="bar_item_img" title="将图片填充至编辑区" src="~@/assets/img/SlideEditor/SlideEditor_ToolBar/fill.png">-->
        <!--<span class="bar_item_text">椭圆</span>-->
      <!--</div>-->
    <!--</div>-->

    <div class="tool_bar_item">
      <div class="bar_item" :class="{bar_item_disabled:false}" @click="fill">
        <img class="bar_item_img" title="将图片填充至编辑区" src="~@/assets/img/SlideEditor/SlideEditor_ToolBar/fill.png">
        <span class="bar_item_text">填充</span>
      </div>
    </div>

    <div class="tool_bar_item">
      <div class="bar_item" :class="{bar_item_disabled:false}" @click="replace">
        <img class="bar_item_img" title="替换原有图片" src="~@/assets/img/SlideEditor/SlideEditor_ToolBar/replace.png">
        <span class="bar_item_text">替换</span>
      </div>
    </div>

    <!--<div class="tool_bar_item">-->
    <!--<div class="bar_item" :class="{bar_item_disabled:false}" @click="restoration">-->
    <!--<img class="bar_item_img" title="重置图片大小" src="~@/assets/img/SlideEditor/SlideEditor_ToolBar/replace.png">-->
    <!--<span class="bar_item_text">重置</span>-->
    <!--</div>-->
    <!--</div>-->

    <div class="tool_bar_item">
      <div class="bar_item" :class="{bar_item_disabled:false}" @click="zoomIn">
        <img class="bar_item_img" title="放大图片" src="~@/assets/img/SlideEditor/SlideEditor_ToolBar/zoomIn.png">
        <span class="bar_item_text">放大</span>
      </div>
    </div>

    <div class="tool_bar_item">
      <div class="bar_item" :class="{bar_item_disabled:false}" @click="zoomOut">
        <img class="bar_item_img" title="缩小图片" src="~@/assets/img/SlideEditor/SlideEditor_ToolBar/zoomOut.png">
        <span class="bar_item_text">缩小</span>
      </div>
    </div>


    <div class="tool_bar_item">
      <div class="bar_item" :class="{bar_item_disabled:false}" @click="isCropImage=false">
        <img class="bar_item_img" title="返回到编辑区" src="~@/assets/img/SlideEditor/SlideEditor_ToolBar/exit.png">
        <span class="bar_item_text">返回</span>
      </div>
    </div>
  </div>
</template>

<script>
  import {mapActions} from 'vuex'
  import events from '../../common/typeEvents'
  import actions from '../../common/typeActions'

  export default {
    name: 'ImageResizerToolBar',
    data () {
      return {}
    },
    computed: {
      isCropImage: {
        get () {
          return this.slideEditor.isCropImage
        },
        set (value) {
          this.setSlideAttr({attrName: 'isCropImage', attrValue: value})
        }
      }
    },
    methods: {
      ...mapActions({
        setSlideAttr: actions.SLIDEEDITOR.SetSlideAttr
      }),
      zoomIn: function () {
        this.$eventBus.$emit(events.ImageResizerToolBar.ImageZoomIn)
      },
      zoomOut: function () {
        this.$eventBus.$emit(events.ImageResizerToolBar.ImageZoomOut)
      },
      restoration: function () {
        this.$eventBus.$emit(events.ImageResizerToolBar.ImageRestoration)
      },
      fill: function () {
        this.$eventBus.$emit(events.ImageResizerToolBar.ImageFill)
      },
      replace: function () {
        this.$eventBus.$emit(events.ImageResizerToolBar.ImageReplace)
      },
      operationChange: function (state) {
        this.$eventBus.$emit(events.ImageResizerToolBar.OperationChange, state)
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  #resizer_bar .slide_tool_bar {
    width: 100%;
    height: calc(100% - 100px);
    background: #288ed3;
    /*float: left;*/
  }

  #resizer_bar .tool_bar_item {
    width: 75px;
    height: 100%;
    display: inline-block;
    /*float: left;*/
    position: relative;
    color: #bee2fa
  }

  #resizer_bar .tool_bar_item:hover {
    background: #c7d3e4;
    color: white
  }

  #resizer_bar .bar_item {
    cursor: pointer;
    height: 100%;
    width: 100%;
  }

  #resizer_bar .bar_item_img {
    /*float: left;*/
    /*margin: 11px 16px;*/
    height: 100%;
    padding: 10px;
    padding-right: 6px;
  }

  #resizer_bar .bar_item_text {
    line-height: 40px;
    color: black;
    font-size: 14px;
  }

  .bar_group_separator {
    display: inline-block;
    background-color: #c0c0c0;
    background-color: rgba(0, 0, 0, .2);
    margin: 5px 2px 0;
    height: 18px;
    width: 1px;
    box-shadow: 1px 0 1px rgba(255, 255, 255, .5);
  }
</style>
